<!-- <div id="app">
    <blabber :ice-breaker="true"></blabber>
    <blabber></blabber>
</div> -->
<style>
    * {
        box-sizing: border-box;
    }

    body {
        font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    }

    dl {
        width: 400px;
        border: 1px dashed #B8B8B8;
        border-top: 0;
        border-radius: 10px;
    }

    dt {
        border-top: 1px dashed #B8B8B8;
        padding: 5px 10px;
        font-weight: 600;
    }

    .first-dt {
        border-radius: 10px 10px 0 0;
    }

    dd {
        margin-left: 0;
        border-top: 1px dashed #B8B8B8;
        padding: 5px 10px;
    }

    dd label {
        width: 20%;
        height: 20px;
        border-radius: 2px;
        font-size: 12px;
        font-weight: 600;
        padding: 2px 0;
        background-color: #f46;
        color: #fff;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
    }

    dd input {
        display: inline-block;
        vertical-align: middle;
        background: #FAFFBD;
        border: 1px solid #B8B8B8;
        outline: none;
        box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
    }

    dd input:focus {
        border-color: #2188ff;
        box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(3, 102, 214, 0.3);
    }

    dd span {
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        color: #D42431;
    }
</style>
<div id="app-1">
    <dl>
        <dt class="first-dt">使用全局View实例管理事件，在任意组件间传递数据</dt>
        <dd>
            <label>父组件</label>
            <input type="text" v-model="message" @input="emitEvent">
            <span>{{message}}</span>
        </dd>
        <dd>
            <label>子组件a</label>
            <component-a></component-a>
            <span>{{message}}</span>
        </dd>
        <dd>
            <label>子组件b</label>
            <component-b></component-b>
            <span>{{message}}</span>
        </dd>
    </dl>
</div>

<div id="app-2">
    <dl>
        <dt class="first-dt">使用$parent和$refs在父子组件间传递数据</dt>
        <dd>
            <label>父组件</label>
            <input type="text" v-model="message" @input="handle">
            <span>{{message}}</span>
        </dd>
        <dd>
            <label>子组件</label>
            <component-21 ref="child"></component-21>
            <span>{{message}}</span>
        </dd>
    </dl>

</div>